<template>
  <div class="w-full h-full object-fill bg-cover bg-center relative"
       :style="'background-image: url(\'/public/beam_' + beam + '.svg\');height: ' + size * 3 + 'vh'"
  >
    <div class="text-center w-full text-char-500 opacity-80 font-bold" :style="{ fontSize: size + 'vh' }">{{ value }}</div>
    <div class="text-center w-full text-char-500 absolute opacity-60" :style="{ fontSize: size * 0.4 + 'vh', bottom: size * 0.6 + 'vh' }">
      {{ label }}
    </div>
  </div>
</template>

<script lang="ts" setup>
defineProps({
  value: {
    type: String,
    required: true
  },

  label: {
    type: String,
    required: true
  },

  beam: {
    type: Number,
    required: true
  },

  size: {
    type: Number,
    required: true
  }

})

</script>

<style>
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
</style>
